:root {
    @apply font-serif bg-primary-bg text-primary-text;
    --color-eureka: #38B2AC;
    --color-primary-bg: rgba(242,242,247,1.00);
    --color-secondary-bg: rgba(255,255,255,1.00);
    --color-tertiary-bg: rgba(242,242,247,1.00);
    --color-primary-text: rgba(0,0,0,0.85);
    --color-secondary-text: rgba(0,0,0,0.7);
    --color-tertiary-text: rgba(0,0,0,0.55);
}

.dark {
    --color-eureka: #38B2AC;
    --color-primary-bg: rgba(0,0,0,1.00);
    --color-secondary-bg: rgba(28,28,30,1.00);
    --color-tertiary-bg: rgba(44,44,46,1.00);
    --color-primary-text: rgba(255,255,255,0.85);
    --color-secondary-text: rgba(255,255,255,0.7);
    --color-tertiary-text: rgba(255,255,255,0.55);
}

a:hover {
    @apply text-eureka;
}